<script setup>
import { BarChart, LineChart } from 'echarts/charts'
import {
  GridComponent,
  LegendComponent,
  TooltipComponent
} from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'

const props = defineProps({
  chartData: Object
})

use([
  GridComponent,
  TooltipComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  BarChart
])
const setData = function (chartData) {
  return {
    backgroundColor: '#100c2a',
    color: ['#fddd60', '#4992ff'],
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 14
      },
      axisPointer: {
        type: 'shadow',
        lineStyle: {
          color: '#fff',
          type: 'solid'
        }
      }
    },
    legend: {
      show: true,
      // right: 200,
      // itemWidth: 20,
      // itemHeight: 2,
      itemGap: 30,
      // icon: 'rect',
      textStyle: {
        fontSize: 14,
        color: '#fff'
      }
    },
    grid: {
      left: '6%',
      right: '4%',
      bottom: '3%',
      top: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        color: '#fff',
        fontSize: 14
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#333'
        }
      },
      data: chartData.time
    },
    yAxis: [
      {
        name: '径流量(m³/s)',
        nameTextStyle: {
          color: '#fff',
          fontSize: 14
        },
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontSize: 14
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333'
          }
        }
      },
      {
        name: '降雨量(mm)',
        nameTextStyle: {
          color: '#fff',
          fontSize: 14
        },
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontSize: 14
        },
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '径流量',
        type: 'line',
        data: chartData.streamflow
      },
      {
        name: '降雨量',
        yAxisIndex: 1,
        type: 'bar',
        data: chartData.tp
      }
    ]
  }
}
const options = ref()
watch(() => [props.chartData], () => {
  options.value = setData(props.chartData)
}, { deep: true })
</script>

<template>
  <div id="echarts" class="h-[100%]">
    <VChart autoresize resize class="h-[100%]" :option="options" />
  </div>
</template>

<style lang="scss" scoped></style>
